<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
		/*含义： 是选中div下面的所有的后代p段落。而不是说是div直接子元素*/

		/*写选择器的啥时候，是可以多个选择器一起组合使用的*/


		/* css 里面的优先级是严格的计算公式。*/
		/* 11 */
		/*id权重值 100 、
		class权重值 10、
		标签权重值 1
		 */
		/* 根据选择器的个数和权重进行计算，然后进行比较，以权重高的样式为准。*/

		/* 有的时候如果我们就希望当前的样式生效，则我们可以使用一个关键字来提升权重 !important*/

		/* 1*100 + 1*1 = 101 */
		#div2 {
			color: blue;
		}


		/* 第一个组： 1*10 + 1*1 = 11 */



		.div1 p{
			color: gold;
		}


		/*第二组： 2 * 1 = 2*/
		div p{

			/*color: red !important;*/
			color: red;

		}


		
	</style>
</head>
<body>
	<h2>后代选择器</h2>

	<div class="div1" id="div2">
		
		<p>第一段信息</p>
		<div>
			<p>第二段信息</p>
		</div>
	</div>


	<!-- <div class="div2">
		<p>div2 第一段信息</p>
		<div>
			<p>div2 第二段信息</p>
		</div>
	</div> -->
</body>
</html>